<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./admin.css">
    <!-- <link rel="stylesheet" href="../css/admin.css"> -->
    <title>Admin</title>
</head>

<body>
    <main>
        <div class="top-info">
            <div class="logo">
                <a href="/">
                    暗天使
                </a>
            </div>
            <div class="info">
                后台管理页
            </div>
        </div>

        <div class="left-nav">
            <ul>
                <li data-for="site" class="active">站点管理</li>
                <li data-for="article">文章管理</li>
                <li data-for="link">友链管理</li>
                <li data-for="info">信息管理</li>
            </ul>
        </div>
        <div class="content">
        </div>
    </main>

    <script>
        let xhr = new XMLHttpRequest()
        function get_content(url) {
            xhr.open('get', url, false)
            xhr.send(null)

            return xhr.responseText
        }
    </script>
    <script>
        let lis = document.querySelectorAll('.left-nav ul li')
        lis.clearClass = function () {
            for (let i = 0; i < lis.length; i++) {
                lis[i].classList.remove('active')
            }
        }

        let content = document.querySelector('.content')

        let default_ = document.querySelector('li.active')
        content.innerHTML = get_content('./page_' + default_.dataset.for + '.html')

        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                lis.clearClass()
                lis[i].classList.add('active')

                content.innerHTML = get_content('./page_' + lis[i].dataset.for + '.html')
            }
        }


    </script>
</body>

</html>